import React, {PureComponent} from 'react';
import {
  View,
  StyleSheet,
  Text,
  TextInput,
  Image,
  TouchableOpacity,
  Keyboard,
  Modal,
  SectionList,
} from 'react-native';
import I18n from 'react-native-i18n';
import {connect} from 'react-redux';
import BaseComponent from '../base/BaseComponent';
import {TextButton} from '../../components/Button';
import {NormalHeader} from '../../components/NavigationHeader';
import {showToast} from '../../components/Toast';
import {userLogout} from '../../redux/action';
import Clipboard from '@react-native-community/clipboard';
import {LinerBoardTextInput} from '../../components/TextInput';
import phoneAreas from '../../config/phoneArea';
import {Colors} from '../../styles/common';

//#FFCB26
class Auction extends BaseComponent {
  constructor(props) {
    super(props);

    let areas = [];

    for (let index = 0; index < 26; index++) {
      areas.push(String.fromCharCode(65 + index));
    }

    let sectionAreas = areas.map((item) => {
      return {
        data: [],
        key: item,
      };
    });

    phoneAreas.map((item) => {
      let firstKey = item.en.substring(0, 1).toLocaleUpperCase();
      let data = sectionAreas[areas.indexOf(firstKey)].data;
      data.push(item);
    });

    sectionAreas = sectionAreas.filter((item) => {
      return item.data.length != 0;
    });

    // console.log(JSON.stringify(sectionAreas));

    this.state = {
      sectionAreas,
      filterAreas: [...sectionAreas],
    };
  }

  renderItem = ({item, index}) => {
    return (
      <TouchableOpacity
        onPress={() => {
          this.props.navigation.state.params.selectCode(item.code);
          this.props.navigation.goBack();
        }}
        style={{
          height: 40,
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          backgroundColor: index % 2 ? 'rgba(241,241,241,1)' : 'transparent',
          paddingLeft: 10,
          paddingRight: 10,
        }}>
        <Text style={{color: Colors.fontDarkGrayColor}}>{item.en}</Text>
        <Text style={{color: Colors.fontDarkGrayColor}}>{'+' + item.code}</Text>
      </TouchableOpacity>
    );
  };

  renderSectionHeader = ({section: {key}}) => {
    // console.log('sectionTitle', key);
    return (
      <View style={{backgroundColor: 'white'}}>
        <Text
          style={{
            color: Colors.fontPurpleColorLight,
            marginBottom: 10,
            marginTop: 10,
          }}>
          {key}
        </Text>
        {/* <Text style={{color: Colors.fontPurpleColorLight}}>{key}</Text>; */}
        <Image
          style={{marginBottom: 10}}
          source={require('../../assets/auction/line.png')}
        />
      </View>
    );
  };

  renderComponent = () => {
    return (
      <View style={{flex: 1, backgroundColor: '#fff'}}>
        <NormalHeader
          navigation={this.props.navigation}
          text="Area Code"
          left={{
            icon: require('../../assets/common/common_back_white.png'),
            onPress: () => {
              Keyboard.dismiss();
              this.props.navigation.goBack();
            },
          }}
        />
        <View style={{padding: 20, flex: 1}}>
          <View
            style={{
              borderRadius: 22,
              backgroundColor: 'rgba(233,233,233,1)',
              height: 40,
              flexDirection: 'row',
              alignItems: 'center',
              paddingLeft: 10,
              paddingRight: 10,
            }}>
            <Image
              style={{width: 20, height: 20, marginRight: 10}}
              source={require('../../assets/login/area_search.png')}></Image>
            <TextInput
              style={{
                height: 44,
                flex: 1,
              }}
              placeholder={'Search'}
              placeholderTextColor="#a1a1a1"
              onChangeText={(text) => {
                let newFilterAreas = this.state.sectionAreas.map((item) => {
                  return {
                    data: [].concat(item.data),
                    key: item.key,
                  };
                });

                if (Number(text)) {
                  newFilterAreas.map((item) => {
                    item.data = item.data.filter((item) => {
                      return item.code.indexOf(text) != -1;
                    });
                  });
                } else {
                  newFilterAreas.map((item) => {
                    item.data = item.data.filter((item) => {
                      return item.en.indexOf(text) != -1;
                    });
                  });
                }

                newFilterAreas = newFilterAreas.filter((item) => {
                  return item.data.length != 0;
                });
                this.setState({
                  filterAreas: newFilterAreas,
                });
              }}></TextInput>
          </View>
          <SectionList
            style={{flex: 1, marginBottom: 20, marginTop: 0}}
            data={this.state.results}
            keyExtractor={(item, index) => index + 'user'} // 给定的item生成一个不重复的key
            renderItem={this.renderItem}
            renderSectionHeader={this.renderSectionHeader}
            showsVerticalScrollIndicator={false}
            sections={this.state.filterAreas}></SectionList>
        </View>
      </View>
    );
  };
}

const mapStateToProps = (state) => ({
  userInfo: state.User.userInfo,
});

const mapDispatchToProps = (dispatch) => ({
  userLogout: (item) => dispatch(userLogout()),
});

export default connect(mapStateToProps, mapDispatchToProps)(Auction);
